import randomImg1 from '@/assets/img/random/du1.jpg';
import randomImg10 from '@/assets/img/random/du10.jpg';
import randomImg11 from '@/assets/img/random/du11.jpg';
import randomImg12 from '@/assets/img/random/du12.jpg';
import randomImg2 from '@/assets/img/random/du2.jpg';
import randomImg3 from '@/assets/img/random/du3.jpg';
import randomImg4 from '@/assets/img/random/du4.jpg';
import randomImg5 from '@/assets/img/random/du5.jpg';
import randomImg6 from '@/assets/img/random/du6.jpg';
import randomImg7 from '@/assets/img/random/du7.jpg';
import randomImg8 from '@/assets/img/random/du8.jpg';
import randomImg9 from '@/assets/img/random/du9.jpg';

import { ftPage } from '@/service/modules/home';
import { Spin } from 'antd';
import { throttle } from 'lodash';
import React, { memo, useEffect, useState } from 'react';
import { useNavigate } from 'umi';
import './index.less';

interface Iparams {
  tagId: string;
  title?: string;
}
interface Iprops {
  params?: Iparams;
  title: string;
}

const Focus: React.FC<Iprops> = (props) => {
  const { params, title } = props;
  const navigate = useNavigate();
  const [pageInfo, setPageInfo] = useState<any>({
    page: 1,
    pageSize: 4,
    total: 0,
  });
  const [loading, setLoading] = useState<boolean>(false);

  const imgList = [
    randomImg1,
    randomImg2,
    randomImg3,
    randomImg4,
    randomImg5,
    randomImg6,
    randomImg7,
    randomImg8,
    randomImg9,
    randomImg10,
    randomImg11,
    randomImg12,
  ];

  const [list, setList] = useState<any[]>([
    // {
    //   id: 1,
    //   title: 'Akina For TypeCho 主题模板',
    //   desc: '描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1描述1',
    //   time: '2021-09-01',
    //   img: imgList[0],
    //   hot: 123,
    //   comment: 0,
    // },
  ]);

  function onDocs(e: any) {
    navigate('/docs', {
      state: {
        id: e.id,
      },
    });
  }

  // 触底
  useEffect(() => {
    const handleScroll = throttle(() => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      console.log('scrollTop', scrollTop, scrollHeight, clientHeight);
      if (scrollTop + clientHeight >= scrollHeight - 200) {
        // 觸底成功
        if (loading === false && list.length < pageInfo.total) {
          console.log('可以執行下一頁');

          setPageInfo((prevPageInfo: any) => ({
            ...prevPageInfo,
            page: prevPageInfo.page + 1,
          }));
        }
      }
    }, 1000);
    window.removeEventListener('scroll', handleScroll);

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [loading, list, pageInfo]);

  useEffect(() => {
    setLoading(true);
    ftPage({
      pageNum: pageInfo.page,
      pageSize: pageInfo.pageSize,
      ...params,
    })
      .then((res) => {
        console.log(res);
        const { code, data, message, total } = res;
        if (code === 200) {
          setPageInfo({
            total,
            page: pageInfo.page,
            pageSize: pageInfo.pageSize,
          });
          setList([
            ...list,
            ...data.map((item) => {
              const { id, title, commentNum, hotNum, updateTime, description } = item;
              return {
                id,
                title,
                desc: description,
                time: updateTime.substring(0, 10),
                img: imgList[Math.floor(Math.random() * 12)], // 隨機0-12
                hot: hotNum,
                comment: commentNum,
              };
            }),
          ]);
        }
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  }, [pageInfo.page, params]);

  return (
    <div className="recent">
      {title && <div className="index-title wrapper-v2">{title}</div>}
      <div className="recent-list wrapper-v2">
        {list.map((item, index) => (
          <div className="rl-item" key={item.id} onClick={() => onDocs(item)}>
            <div className="rli-avator">
              <img src={item.img} alt="" />
              <div className="rli-hot-comment">
                <div className="rlihc-item">
                  <i className="iconfont icon-hot"></i>
                  <span>{item.hot}</span>
                </div>
                <div className="rlihc-item">
                  <i className="iconfont icon-mark"></i>
                  <span>{item.comment}</span>
                </div>
              </div>
            </div>
            <div className="rli-content">
              <div className="rlic-title">
                <div className="rlict-title">{item.title}</div>
                <div className="rlict-time">
                  <i className="iconfont icon-time"></i>
                  <span>{item.time}</span>
                </div>
              </div>
              <div className="rlic-desc">{item.desc}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="recent-loading wrapper-v2">
        {!loading && list.length < pageInfo.total ? (
          <Spin />
        ) : (
          <div className="recent-loading-text">没有更多了...</div>
        )}
      </div>
    </div>
  );
};

export default memo(Focus);
